<template>
<div class="et-card-wrapper">
  <div :class="['et-card-flipper ', {'et-flip': showCardBack}]">

    <card-front :id="id"
                :initial="cardFront.initial"
                :is-locked="isLocked"
                :enable-lock-btn="enableLockBtn"
                :title="title"
                :theme="theme"
                :has-card-back="cardFront.hasCardBack"
                :func-btns="cardFront.funcBtns"
                :flip-icon="cardFront.flipIcon"
                :flip-handler="flipHandler"
                :ops-btns="cardFront.opsBtns" />

    <card-back v-if="cardBack"
               :id="id"
               :is-locked="isLocked && enableLockBtn"
               :theme="theme"
               :flip-back-icon="cardBack.flipBackIcon"
               :flip-back-handler="flipBackHandler"
               :title="title"
               :ops-btns="cardBack.opsBtns" />

  </div>
</div>
</template>

<script>
import CardFront from './CardFront';
import CardBack from './CardBack';

export default {

  components: {
    CardFront,
    CardBack
  },

  props: {
    id: {
      type: String,
      required: true
    },
    theme: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    cardFront: {
      type: Object,
      required: true
    },
    cardBack: {
      type: Object
    },
    isLocked: {
      type: Boolean
    },
    enableLockBtn: {
      type: Boolean
    }
  },

  data() {
    return {
      showCardBack: false
    };
  },

  methods: {

    flipHandler() {
      this.showCardBack = true;
    },

    flipBackHandler() {
      this.showCardBack = false;
    }

  }
};
</script>
